<template>
    <!-- 小程序状态栏 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- #endif -->
    
    <view class="container">
      <!-- 头部搜索和滚动图的渐变背景容器 -->
      <view class="gradient-container">
        <!-- 顶部搜索栏部分 -->
        <!-- <view class="header">
          <view class="title-area">
            <text class="title">任务大厅</text>
            <text class="subtitle">接单赚钱，轻松变现</text>
          </view>
          <view class="notification">
            <image class="notification-icon" src="http://localhost:5173/static/Images/tesk/Tongzhi.png" mode="aspectFit"></image>
            <view class="badge">1</view>
          </view>
        </view> -->

        <!-- 搜索框和消息图标 -->
        <view class="search-box">
          <view class="search-input">
            <image class="search-icon" :src="images.search" mode="aspectFit"></image>
            <input type="text" placeholder="搜索任务名称" disabled @click="goToSearch" />
            <view class="search-button" @click="goToSearch">
                <text>搜索</text>
            </view>
          </view>
          
          <view class="message-icon-container" @click="goToMessage">
            <image class="message-icon" :src="images.message" mode="aspectFit"></image>
            <view class="message-badge">1</view>
          </view>
        </view>
        
        <!-- 滚动图模块 -->
        <view class="banner-box">
          <swiper class="banner-swiper" circular autoplay interval="3000" duration="500" indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
            <swiper-item v-for="(banner, index) in bannerList" :key="index">
              <image class="banner-image" :src="banner.img" mode="widthFix"></image>
            </swiper-item>
            <!-- 如果没有轮播图数据，显示默认图片 -->
            <swiper-item v-if="bannerList.length === 0">
              <image class="banner-image" :src="images.banner" mode="widthFix"></image>
            </swiper-item>
          </swiper>
        </view>
      </view>
      
      <!-- 菜单板块 -->
      <view class="menu-section">
        <view class="menu-container">
          <!-- 话费帮充 -->
          <view class="menu-item" @click="navigateToMenu('huafei')">
            <image class="menu-icon" :src="images.huafei" mode="aspectFit"></image>
            <text class="menu-text">话费帮充</text>
          </view>
          
          <!-- 权益帮充 -->
          <view class="menu-item" @click="navigateToMenu('quanyi')">
            <image class="menu-icon" :src="images.quanyi" mode="aspectFit"></image>
            <text class="menu-text">权益帮充</text>
          </view>
          
          <!-- 回收卡券 -->
          <view class="menu-item" @click="navigateToMenu('huishou')">
            <image class="menu-icon" :src="images.huishou" mode="aspectFit"></image>
            <text class="menu-text">回收卡券</text>
          </view>
          
          <!-- 帮充攻略 -->
          <view class="menu-item" @click="navigateToMenu('gonglue')">
            <image class="menu-icon" :src="images.gonglue" mode="aspectFit"></image>
            <text class="menu-text">帮充攻略</text>
          </view>
          
          <!-- 赚券攻略 -->
          <view class="menu-item" @click="navigateToMenu('zhuanquan')">
            <image class="menu-icon" :src="images.haoquan" mode="aspectFit"></image>
            <text class="menu-text">赚券攻略</text>
          </view>
        </view>
      </view>
      <!--今日业绩-->
      <view class="performance-section" :style="{backgroundImage: `url(${images.yeji})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat'}">
        <view class="performance-header">
          <text class="performance-title">今日业绩</text>
          <view class="performance-income">
            <image class="income-icon" :src="images.yugu" mode="aspectFit"></image>
            <text class="income-label">预估收入</text>
            <text class="income-value">999999</text>
            <text class="income-unit">元</text>
          </view>
        </view>
        <view class="performance-stats">
          <view class="stat-item">
            <text class="stat-value">112600</text>
            <text class="stat-label">成功单量</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">12</text>
            <text class="stat-label">失败单量</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">9</text>
            <text class="stat-label">异常单量</text>
          </view>
        </view>
      </view>
      
      <!--帮充流程-->
      <view class="recharge-process-section" :style="{backgroundImage: `url(${images.yeji})`, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}">
        <view class="recharge-header">
          <text class="recharge-title">帮充流程</text>
          <view class="recharge-success">
            <image class="success-icon" :src="images.yibang" mode="aspectFit"></image>
            <text class="success-text">已成功帮</text>
            <text class="success-count">312275</text>
            <text class="success-unit">人充值成功</text>
          </view>
        </view>
        <view class="process-steps">
          <view class="step-icon" :style="{ backgroundImage: `url(${images.process})` }"></view>
        </view>
        <view class="step-item-four">
              <view class="step-item">
                <text class="step-text">获取订单</text>
              </view>
              <view class="step-item">
                <text class="step-text">处理订单</text>
              </view>
              <view class="step-item">
                <text class="step-text">上传凭证</text>
              </view>
              <view class="step-item">
                <text class="step-text">等待结算</text>
              </view>
              <view class="step-item">
                <text class="step-text">获得收益</text>
              </view>
            </view>
      </view>
      
      <!-- 核心专区 -->
      <view class="core-section">
        <view class="section-header">
          <text class="section-title">核心专区</text>
          <view class="more-link" @click="navigateToMore()">
            <image class="more-icon" :src="images.more" mode="aspectFit"></image>
            <text>更多话费、视听会员帮充</text>
          </view>
        </view>
        
        <view class="core-container">
          <!-- 左侧容器：话费充值和权益帮充 -->
          <view class="core-left-container">
            <!-- 话费官方充值 -->
            <view class="core-item" :style="{backgroundImage: `url(${images.phoneBill})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', backgroundSize: '100%'}" @click="navigateToMenu('huafei')">
              <view class="core-item-left">
                <view class="core-item-title">话费官方充值</view>
                <view class="core-item-subtitle">有<text class="highlight">100</text>单待充</view>
                <view class="core-item-link">去查看 ></view>
              </view>
            </view>
            
            <!-- 权益帮充 -->
            <view class="core-item" :style="{backgroundImage: `url(${images.rightsInterests})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', backgroundSize: '100%'}" @click="navigateToMenu('quanyi')">
              <view class="core-item-left">
                <view class="core-item-title">权益帮充</view>
                <view class="core-item-subtitle">有<text class="highlight">100</text>单待充</view>
                <view class="core-item-link">去查看 ></view>
              </view>
            </view>
          </view>
          
          <!-- 右侧容器：卡券回收 -->
          <view class="core-right-container">
            <!-- 卡券回收 -->
            <view class="core-item card-recycle" :style="{backgroundImage: `url(${images.cardRoll})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', backgroundSize: '100%'}" @click="navigateToMenu('huishou')">
              <view class="core-item-left">
                <view class="core-item-title">卡券回收</view>
                <view class="core-item-subtitle">支持多类卡券，最高折扣<text class="highlight">99.9</text></view>
                <view class="core-item-link">去查看 ></view>

                <!-- 海量订单等你来做 -->
                <view class="order-item" @click="navigateToMenu('orders')">
                    <view class="order-content">
                        <view class="order-title">海量订单等你来做</view>
                        <view class="order-subtitle">众多资源轻松变现 ></view>
                    </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 文章模块 -->
      <view class="article-section">
        <view class="section-header">
          <view class="section-title">行业文章</view>
        </view>
        
        <view class="article-container">
          <!-- 文章分类导航 -->
          <view class="article-tabs">
            <view 
              v-for="(category, index) in articleCategories" 
              :key="category.id"
              class="tab"
              :class="{ active: selectedCategoryIndex === index }"
              @click="switchArticleCategory(index)"
              :style="selectedCategoryIndex === index ? { '--tab-indicator': `url(${images.xuanzhong})` } : {}"
            >
              {{ category.name }}
            </view>
          </view>
          
          <!-- 文章列表 -->
          <view class="article-list">
            <!-- 文章项 -->
            <view 
              v-for="article in articleList" 
              :key="article.id"
              class="article-item" 
              @click="navigateToArticle(article.id)"
            >
              <view 
                class="article-image" 
                :style="{
                  backgroundImage: article.avarter ? `url(${article.avarter})` : `url(${images.xuanzhong})`, 
                  backgroundRepeat: 'no-repeat', 
                  backgroundPosition: 'center', 
                  backgroundSize: '100%'
                }"
              ></view>
              <view class="article-content">
                <view class="article-title">{{ article.title }}</view>
                <view class="article-desc">{{ article.small_title }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
    </view>
    

    <tab-bar :active="3">
    </tab-bar>
</template>

<script>
import TabBar from '../../components/TabBar.vue'
import { ref, computed, onMounted, getCurrentInstance } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { userStorage } from '@/utils/storage'
import { getImageUrl } from '@/config/api'
import { indexApi, userApi } from '@/utils/api'

export default {
  components: {
    'tab-bar': TabBar
  },
  setup() {
    // 获取当前组件实例
    const instance = getCurrentInstance()
    
    // 状态栏高度
    const statusBarHeight = ref(0)
    
    // 用户信息
    const userInfo = ref({
      real_name: '',
      idcard: ''
    })
    

    
    // 登录状态检查（使用全局方法）
    const checkLoginStatus = () => {
      return userStorage.isLoggedIn()
    }
    
    // 实名认证检查函数：real_name 与 idcard 同时非空才算通过
    const isMerchantVerified = () => {
      const rn = String(userInfo.value.real_name || '').trim();
      const ic = String(userInfo.value.idcard || '').trim();
      return !!(rn && ic);
    }
    
    // 获取用户信息
    const fetchUserInfo = async () => {
      try {
        if (!checkLoginStatus()) return false;
        const response = await userApi.getUserInfo();
        
        // 检查响应状态码，如果code为0，说明token无效
        if (response && (response.code === 0 || response.code === '0')) {
          console.log('用户token已失效，清除本地存储');
          userStorage.logout();
          return false;
        }
        
        // 兼容不同返回结构
        const data = (response && (response.data?.data ?? response.data ?? response)) || {};
        
        // 保存实名认证相关信息
        userInfo.value.real_name = data?.real_name || '';
        userInfo.value.idcard = data?.idcard || '';
        
        return true;
      } catch (error) {
        console.error('获取用户信息失败:', error);
        return false;
      }
    }
    
    // 检查实名认证状态
    const checkVerificationStatus = () => {
      if (!checkLoginStatus()) {
        // 未登录，全局登录引导已处理
        return false;
      }
      
      if (!isMerchantVerified()) {
        // 未实名认证，使用全局认证引导方法
        instance.appContext.config.globalProperties.$showVerificationGuide();
        return false;
      }
      
      return true;
    }
    
    // 轮播图数据
    const bannerList = ref([])
    
    // 文章相关数据
    const articleCategories = ref([])
    const articleList = ref([])
    const selectedCategoryIndex = ref(0)
    
    // 图片路径计算属性
    const images = computed(() => ({
      // 任务大厅相关图片
      notification: getImageUrl('/static/Images/tesk/Tongzhi.png'),
      search: getImageUrl('/static/Images/tesk/Search.png'),
      message: getImageUrl('/static/Images/tesk/Xiaoxi.png'),
      banner: getImageUrl('/static/Images/tesk/Gun-1.png'),
      huafei: getImageUrl('/static/Images/tesk/Huafei.png'),
      quanyi: getImageUrl('/static/Images/tesk/Quanyi.png'),
      huishou: getImageUrl('/static/Images/tesk/Huishou.png'),
      gonglue: getImageUrl('/static/Images/tesk/Gonglue.png'),
      haoquan: getImageUrl('/static/Images/tesk/Haoquan.png'),
      yugu: getImageUrl('/static/Images/tesk/Yugu.png'),
      yibang: getImageUrl('/static/Images/tesk/Yibang.png'),
      more: getImageUrl('/static/Images/tesk/Tongzhi.png'),
      // 背景图片
      phoneBill: getImageUrl('/static/Images/tesk/Phone-bill.png'),
      rightsInterests: getImageUrl('/static/Images/tesk/Rights-interests.png'),
      cardRoll: getImageUrl('/static/Images/tesk/Card-roll.png'),
      yeji: getImageUrl('/static/Images/tesk/Yeji.png'),
      xuanzhong: getImageUrl('/static/Images/tesk/Xuanzhong.png'),
      process: getImageUrl('/static/Images/tesk/Process.png')
    }))


    
    // 跳转到搜索页面
    const goToSearch = () => {
      uni.navigateTo({
        url: '/pages/common/search'
      })
    }
    
    // 跳转到消息页面
    const goToMessage = () => {
      uni.navigateTo({
        url: '/pages/notice/index'
      })
    }
    
    // 菜单导航（兼容微信小程序）
    const navigateToMenu = (type) => {
      // 需要登录的功能
      const needLoginTypes = ['huafei', 'quanyi', 'huishou', 'orders']
      // 需要实名认证的功能
      const needVerificationTypes = ['huafei', 'quanyi', 'huishou', 'orders']
      
      // 实时检查登录状态，兼容微信小程序
      if (needLoginTypes.includes(type) && !checkLoginStatus()) {
        // 全局登录引导已处理
        return
      }
      
      // 检查实名认证状态
      if (needVerificationTypes.includes(type) && !isMerchantVerified()) {
        // 使用全局认证引导方法
        instance.appContext.config.globalProperties.$showVerificationGuide();
        return
      }
      
      let url = '';
      switch(type) {
        case 'huafei':
          url = '/pages/tasks/billorder';
          break;
        case 'quanyi':
          url = '/pages/tasks/rightsorder';
          break;
        case 'huishou':
          url = '/pages/tasks/consignment';
          break;
        case 'gonglue':
          url = '/pages/text/guidelist';
          break;
        case 'zhuanquan':
          url = '/pages/text/guidelist';
          break;
        case 'orders':
          url = '/pages/tasks/orderlist';
          break;
        default:
          break;
      }
      if (url) {
        uni.navigateTo({ url });
      }
    };
    
    // 更多链接导航
    const navigateToMore = (type) => {
      let url = '';
      let title = '';
      let needVerification = false;
      
      switch(type) {
        case 'article':
          url = '/pages/tasks/article?type=all&title=行业文章';
          title = '行业文章';
          needVerification = false;
          break;
        default:
          url = '/pages/tasks/section?type=more&title=更多帮充';
          title = '更多帮充';
          needVerification = true; // 帮充功能需要实名认证
          break;
      }
      
      // 检查登录状态
      if (needVerification && !checkLoginStatus()) {
        // 全局登录引导已处理
        return
      }
      
      // 检查实名认证状态
      if (needVerification && !isMerchantVerified()) {
        // 使用全局认证引导方法
        instance.appContext.config.globalProperties.$showVerificationGuide();
        return
      }
      
      uni.navigateTo({
        url: url
      });
    };
    

    
    // 获取轮播图数据
    const getBannerList = async () => {
      console.log('开始获取轮播图数据...')
      try {
        const response = await indexApi.getBannerList()
        console.log('轮播图接口响应:', response)
        console.log('响应数据结构:', response)
        if (response && response.code === 1) {
          bannerList.value = response.data || []
          console.log('设置轮播图数据:', bannerList.value)
          console.log('轮播图数据长度:', bannerList.value.length)
        } else {
          console.log('接口返回失败，code:', response?.code)
        }
      } catch (error) {
        console.error('获取轮播图数据失败:', error)
        // 如果接口失败，使用默认图片
        bannerList.value = [
          { img: getImageUrl('/static/Images/tesk/Gun-1.png') },
          { img: getImageUrl('/static/Images/tesk/Gun-1.png') },
          { img: getImageUrl('/static/Images/tesk/Gun-1.png') }
        ]
        console.log('使用默认图片数据')
      }
    }
    
    // 获取文章分类
    const getArticleCategories = async () => {
      try {
        const response = await indexApi.getAllArticleType()
        console.log('文章分类接口响应:', response)
        if (response && response.code === 1) {
          // 过滤掉已删除的分类 (isdelete === 0 表示未删除)
          articleCategories.value = (response.msg || []).filter(category => category.isdelete === 0)
          console.log('设置文章分类数据:', articleCategories.value)
          
          // 如果有分类，默认加载第一个分类的文章
          if (articleCategories.value.length > 0) {
            selectedCategoryIndex.value = 0
            await getArticleList(articleCategories.value[0].id)
          }
        } else {
          console.log('文章分类接口返回失败，code:', response?.code)
        }
      } catch (error) {
        console.error('获取文章分类失败:', error)
      }
    }
    
    // 获取文章列表
    const getArticleList = async (type, page = 1, size = 10) => {
      try {
        const response = await indexApi.findArticles({ type, page, size })
        console.log('文章列表接口响应:', response)
        if (response && response.code === 1) {
          articleList.value = response.msg || []
          console.log('设置文章列表数据:', articleList.value)
        } else {
          console.log('文章列表接口返回失败，code:', response?.code)
        }
      } catch (error) {
        console.error('获取文章列表失败:', error)
      }
    }
    
    // 切换文章分类
    const switchArticleCategory = async (index) => {
      selectedCategoryIndex.value = index
      const selectedCategory = articleCategories.value[index]
      if (selectedCategory) {
        await getArticleList(selectedCategory.id)
      }
    }
    
    // 跳转到文章详情页面
    const navigateToArticle = (articleId) => {
      uni.navigateTo({
        url: `/pages/tasks/article?article_id=${articleId}`
      })
    }
    
    // 组件挂载时获取数据
    onMounted(() => {
      // 获取状态栏高度（仅小程序）
      // #ifdef MP-WEIXIN
      const systemInfo = uni.getSystemInfoSync()
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      // 状态栏高度 + 胶囊按钮高度 + 额外间距
      statusBarHeight.value = (systemInfo.statusBarHeight || 0) + (menuButtonInfo.height || 32) + 8
      // #endif
      
      getBannerList()
      fetchUserInfo()
      getArticleCategories()
    })
    
    // 页面显示时检查认证状态
    onShow(async () => {
      try {
        // 获取用户信息，等待完成
        const userInfoFetched = await fetchUserInfo()
        
        // 如果用户信息获取失败（未登录或网络错误），不继续执行
        if (!userInfoFetched) {
          return
        }
        
        // 用户信息获取成功后，立即检查认证状态
        if (!checkVerificationStatus()) {
          // 如果认证检查失败，不继续执行页面逻辑
          return
        }
        
        // 认证检查通过，可以继续执行其他页面逻辑
        console.log('用户已通过实名认证，可以正常使用任务大厅功能')
      } catch (error) {
        console.error('页面初始化失败:', error)
      }
    })
    
    return {
      statusBarHeight,
      checkLoginStatus,
      images,
      bannerList,
      goToSearch,
      goToMessage,
      navigateToMenu,
      navigateToMore,
      // 文章相关
      articleCategories,
      articleList,
      selectedCategoryIndex,
      switchArticleCategory,
      navigateToArticle
    }
  }
}
</script>

<style lang="scss">
/* 小程序状态栏样式 */
.status-bar {
  width: 100%;
  background-color: #FF7B80;
}

.container {
  min-height: auto;
  width: 752rpx;
  margin: 0 auto;
  padding-bottom: 100rpx;
  background: #F4F4F4;
}

/* 渐变背景容器 */
.gradient-container {
  background: linear-gradient(180deg, #FF7B80 0%, rgba(244,234,234,0) 100%);
  border-radius: 0px 0px 0px 0px;
  height: 247px;
}

/* 顶部标题和通知部分样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  background-color: transparent;
  width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.title-area {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.subtitle {
  font-family: 'PingFang SC', 'PingFang SC';
  font-weight: 500;
  font-size: 11px;
  color: #111111;
  font-style: normal;
  text-transform: none;
}

.notification {
  position: relative;
}

.notification-icon {
  width: 50rpx;
  height: 50rpx;
}

.badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #ff0000;
  color: #fff;
  font-size: 20rpx;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜索框样式 */
.search-box {
  display: flex;
  padding-top: 1.5rem;
  background-color: transparent;
  width: 700rpx;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: space-between;
}

.search-input {
  display: flex;
  align-items: center;
  flex: 1;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 10rpx 20rpx;
  position: relative;
  margin-right: 20rpx;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.search-input input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
}

.search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 30rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  height: 60rpx;
  margin-left: 10rpx;
}

/* 消息图标样式 */
.message-icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-icon {
  width: 50rpx;
  height: 50rpx;
}

.message-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #ff0000;
  color: #fff;
  font-size: 20rpx;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 滚动图模块样式 */
.banner-box {
  padding: 0;
  margin-top: 12px;
  display: flex;
  justify-content: center;
  /* #ifdef MP-WEIXIN */
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  /* #endif */
}

.banner-swiper {
  width: 22rem;
  height: 300rpx;
  border-radius: 12rpx;
  overflow: hidden;
  /* #ifdef MP-WEIXIN */
  width: 700rpx;
  /* #endif */
}

.banner-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

/* 自定义指示点样式 */
:deep(.uni-swiper-dots-horizontal) {
  bottom: 10px;
}

:deep(.uni-swiper-dot) {
  width: 16rpx;
  height: 16rpx;
  border-radius: 8rpx;
  background-color: #FFFFFF;
  margin: 0 4rpx;
}

:deep(.uni-swiper-dot-active) {
  width: 40rpx;
  height: 16rpx;
  border-radius: 8rpx;
  background-color: #FFFFFF;
}

/* 菜单板块样式 */
.menu-section {
  padding: 0 30rpx;
  position: relative;
  z-index: 10;
  width: 700rpx;
  /* #ifdef MP-WEIXIN */
  margin-bottom: 30rpx;
  /* #endif */
}

.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  /* #ifdef MP-WEIXIN */
  width: 700rpx;
  /* #endif */
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.menu-text {
  font-size: 24rpx;
  color: #333333;
  text-align: center;
}

/* 核心专区模块样式 */
.core-section {
  margin-top: 30rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  border-radius: 8px 8px 8px 8px;
  width: 640rpx;
  margin-left: 0.8rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-top: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.more-link {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999999;
}

.more-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 0.2rem;
}

.core-container {
  display: flex;
  justify-content: space-between;
}

.core-left-container {
  width: 43%;
  display: flex;
  flex-direction: column;
}

.core-right-container {
  width: 43%;
  display: flex;
  flex-direction: column;
  margin-right: 1rem;
}

.core-item {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.card-recycle {
  height: 75%;
}

.core-item-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.core-item-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}

.core-item-subtitle {
  font-size: 24rpx;
  color: #666666;
  margin-bottom: 20rpx;
}

.highlight {
  color: #FF4D4F;
  font-weight: bold;
}

.core-item-link {
  font-size: 24rpx;
  color: #4A90E2;
}



.order-item {
  width: 100%;
  height: 25%;
  color: #FFFFFF;
  padding: 30rpx;
  border-radius: 16rpx;
  box-sizing: border-box;
}

.order-content {
  width: 100%;
  padding-bottom: 2.5rem;
  margin-left: -0.8rem;
  margin-top: -0.3rem;
}

.order-title {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.order-subtitle {
  font-size: 0.7rem;
  opacity: 0.9;
}

/* 今日业绩样式 */
.performance-section {
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
}

.performance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.performance-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

.performance-income {
  display: flex;
  align-items: center;
}

.income-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
  margin-left: -11.6rem;
}

.income-label {
  font-size: 24rpx;
  color: #999999;
  margin-right: 10rpx;
}

.income-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #999999;
}

.income-unit {
  font-size: 24rpx;
  color: #999999;
  margin-left: 5rpx;
}

.performance-stats {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

/* 帮充流程样式 */
.recharge-process-section {
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
}

.recharge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.recharge-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

.recharge-success {
  display: flex;
  align-items: center;
}

.success-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.success-text {
  font-size: 24rpx;
  color: #999999;
  margin-right: 5rpx;
}

.success-count {
  font-size: 28rpx;
  font-weight: bold;
  color: #999999;
  margin-right: 5rpx;
}

.success-unit {
  font-size: 24rpx;
  color: #999999;
}

.process-steps {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  background-color: #fff;
  border-radius: 10rpx;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  margin-top: -1rem;
}

.step-icon {
  width: calc(100% - 2rem);
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 1rem;
  margin-right: 1rem;
  height: 3rem;
}

.step-item-four {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  background-color: #ffffff;
}

.step-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

/* 文章模块样式 */
.article-section {
  margin-top: 30rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
}

/* 文章分类导航 */
.article-tabs {
  display: flex;
  overflow-x: auto;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  white-space: nowrap;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* 隐藏WebKit浏览器的滚动条 */
.article-tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #666666;
  position: relative;
}

.tab.active {
  color: #FF4D4F;
  font-weight: bold;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 30rpx;
  height: 30rpx;
  background-image: var(--tab-indicator);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 文章列表 */
.article-list {
  margin-top: 20rpx;
}

.article-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #EEEEEE;
}

.article-image {
  width: 200rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.article-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  line-height: 1.4;
}

.article-desc {
  font-size: 26rpx;
  color: #999999;
  line-height: 1.4;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>